<template>
  <cm-card :cm-class="cmClass" :cm-style="cmStyle" :is-shadow="false">
    <view class="cm-calendar-week">
      <view>日</view>
      <view>一</view>
      <view>二</view>
      <view>三</view>
      <view>四</view>
      <view>五</view>
      <view>六</view>
    </view>
    <!-- 月历 -->
    <swiper ref="swiper" :class="[ type === 'month' ? 'cm-calendar-swiper' : 'cm-calendar-swiper-week' ]" circular
      :current="swiperIndex"
      :duration="aniDuration"
      @change="swipeHandler"
      @animationfinish="animationFinishHandler">
      <swiper-item v-for="(month, index) in dateSet" :key="index">
        <view class="cm-calendar-main">
          <view class="cm-calendar-item" v-for="(day, dayIndex) in month"
            :key="dayIndex"
            :class="[ day.holiday,
              selectedIndex === dayIndex && index === curIndex ? 'selected' : '',
              day.calendarType ]"
            @click="dayClickHandler(day)">
            
            <view class="cm-calendar-item-up" style="height: 26px">
              <view class="cm-calendar-day-text cm-text-16">{{ day.day }}</view>
              <view class="cm-calendar-ganzhi cm-text-12">{{ day.ganzhi }}</view>           
            </view>
            <view class="cm-text-12 cm-margin-top-3">{{ day.event }}</view>
            
          </view>
        </view>
      </swiper-item>
    </swiper>
  </cm-card>
</template>

<script src="./cm-calendar.js"></script>

<style lang="stylus">
@import './cm-calendar.styl'
</style>
